<template>
  <swiper
    :slides-per-view="5"
    :space-between="10"
    @swiper="onSwiper"
    @slideChange="onSlideChange"

  >
    <swiper-slide v-for="(data, index) in datalist" :key="index" class="swiper"  @click="handleClick(data.dtid)">
      <div class="dataimages" >
        <img :src="data.images" alt="" class="images" />
      </div>
      <div class="gamename">
        {{ data.gamename }}
      </div>
    </swiper-slide>
    <swiper-slide></swiper-slide>
    <swiper-slide></swiper-slide>
    <swiper-slide></swiper-slide>
  </swiper>
  <div class="huanchong">
  </div>
</template>
<script>
// import Swiper core and required modules
// import SwiperCore, { Pagination } from 'swiper';
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'

// Import Swiper styles
import 'swiper/swiper.scss'
// import "swiper/components/pagination/pagination.scss";

import getjson from '@/directive/getjson.js'

// install Swiper modules
// SwiperCore.use([ Pagination]);

export default {
  data () {
    return {
      datalist: []
    }
  },
  pagination: {
    el: '.swiper-pagination',
    type: 'bullets'
  },
  components: {
    Swiper,
    SwiperSlide
  },
  methods: {
    onSwiper (swiper) {
      // console.log(swiper)
    },
    onSlideChange () {
      // console.log("slide change");
    },
    handleClick (fon) {
      // console.log(id)
      if (fon === 100) {
        // console.log(chatlisth5)
        this.$router.push('/chatlisth5')
      }
      if (fon !== 100) {
        // console.log(listdtid)
        this.$router.push(`/list/?dtid=${fon}`)
      }
    }
  },
  mounted () {
    getjson(
      'https://yapi.tuwan.com/Index/getPlayIndexApi/?type=chat&callback=_jsonpj7ow52i9b6',
      (red) => {
        // console.log(red.gamelist)
        this.datalist = red.gamelist
      }
    )
  }
}
</script>
<style scoped lang="scss">
*{
  background:#FFF;;
}
  .images {
  width: 70%;
  text-align: center;
  padding-left: 8px;
  padding-top:8px;
}

.gamename {
  height: 20px;
  width: 60px;
  line-height: 20px;
  font-size: 13px;
  text-align: center;
}
.huanchong{
  width:100%;
  height:10px;
  background:#F5F5F5;
}

</style>
